<template>
  <view class="cart-order-detail-wrap" v-if="info" >
    <!--  订单状态  -->
    <view class="status">
      <view class="iconfont icon-dingdanzhuangtai status__label" ></view>
      <view class="status__desc" >
        <text>{{ status | statusValueFilter }}</text>
      </view>
    </view>

    <view class="list" >
      <view class="ceil" >
        <view class="label" >出发地：</view>
        <view class="value" >{{ info.start_point }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >目的地/区域：</view>
        <view class="value" >{{ info.destination }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >出发时间：</view>
        <view class="value" >{{ info.start_time }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >截止时间：</view>
        <view class="value" >{{ info.end_time }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >费用(元/人)：</view>
        <view class="value" >{{ info.cost | changeSub  }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >拼车人数：</view>
        <view class="value" >{{ info.recruit_amount }}</view>
      </view>
      <view class="ceil" >
        <view class="label" >其他说明：</view>
        <view class="value" >{{ info.cost_explain }}</view>
      </view>
    </view>

     <!-- 图片上传 -->
     <view class="upload-box" >
      <view class="title" >
        <text class="title-main" >车辆图片</text>
        <text class="title-desc" >(请上传含车牌信息的照片)</text>
      </view>
      <!-- 上传组件 -->
      <view class="box-solid" >
        <image class="img" :src="info.car_pic" ></image>
      </view>
     </view>

     <!-- 参与人数 -->
     <view class="join-box" >
       <view class="box" >
         <view class="title" >参与人数</view>
         <view class="num" >{{ info.join_amount }}/{{ info.recruit_amount }}</view>
       </view>
       <view class="ceil" v-for="(item, index) in listMan" :key="item.id" >
         <view class="sort" >{{ index + 1 }}</view>
         <view class="name" >{{ item.name }}</view>
         <view class="mobile" @tap="handleToMobile(item.mobile)" >{{ item.mobile }}</view>
       </view>
     </view>

    <!-- 进行中 -->
     <view class="btn-box" v-if="status == 1 || status == 0" >
       <button
         class="pp-button cancel-btn"
         hover-class="pp-button--active"
         @tap="handleCancel"
       >
         取消订单
       </button>
     </view>

  </view>
</template>

<script>
  import { ARTICLE_DETAIL } from '@/api/home';
  import { momentDate } from '@/tool';
  import { ORDER_CAR_MAN, ORDER_CAR_CANCEL } from '@/api/order';
  export default {
    data() {
      return {
        id: '',
        status: '',
        listMan: [],
        info: null
      }
    },
    onLoad({id, status}) {
      this.id = id;
      this.getDetail(id);

      this.status = status;
      // 参与人数
      this.getOrderMan(id);
    },
    filters: {
      statusValueFilter(val) {
        const statusObj = {
          1: '进行中',
          3: '已结束',
          2: '已取消',
        }

        return statusObj[val]
      }
    },
    methods: {
      getDetail(id) {
        this.$http.get(`${ARTICLE_DETAIL}/${id}`).then(res => {
          this.info = res.data;
          this.info.start_time = momentDate(res.data.start_time);
          this.info.end_time = momentDate(res.data.end_time);
        });
      },
      getOrderMan(id) {
        this.$http.get(ORDER_CAR_MAN, {
          id: this.id,
          per_page: 100
        })
        .then(res => {
            if(res.data.length) {

              let listMan = res.data.map((item) => {
                return item.status === 1 && item;
              })

              this.listMan = listMan || [];
            }
        })
      },
      handleToMobile(str) {
        uni.makePhoneCall({
          phoneNumber: str,
        });
      },
      cancelOrder() {
        this.$http.put(ORDER_CAR_CANCEL, {
          id: this.id,
          status: 2
        }, {
          showLoading: true
        })
        .then(() => {
          uni.showToast({
            title: '取消成功',
            icon: 'success',
          });
          
          setTimeout(() => {
            uni.hideLoading();
            uni.navigateBack({
              delta: 1,
            })
          }, 1000)
        })
      },
      handleCancel() {
        uni.showModal({
          title: '温馨提示',
          content: `确定取消订单?`,
          success: res => {
            if (res.confirm) {

               this.cancelOrder()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
        });
      }
    }


  }


</script>

<style lang="less" >
  .cart-order-detail-wrap{
    padding-bottom: 150rpx;
    padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    .status {
      display: flex;
      width: 100%;
      height: 196rpx;
      padding: 50rpx 36rpx;
      background: #fedd00;
      &__label{
        font-size: 44rpx;
        margin-top: -2rpx;
      }
      &__desc{
        display: flex;
        font-size: 34rpx;
        margin-left: 10rpx;
      }
    }
    .list{
      width: 710rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-top: -48rpx;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;
      .ceil{
        position: relative;
        display: flex;
        align-items: center;
        padding: 24rpx;
        &::before{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          width: 662rpx;
          height: 1px;
          background-color: #EEEEEE;
        }
        &:last-child{
          &::before{
            display: none;
          }
        }
        .label{
          flex-shrink: 0;
          width: 180rpx;
          font-size: 28rpx;
          color: #666666;
        }
        .value{
          flex: 1;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }
    .upload-box{
      width: 710rpx;
      padding-bottom: 24rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;

      .title{
        display: flex;
        align-items: center;
        padding: 24rpx;
        .title-main{
          font-size: 28rpx;
          font-weight: 500;
        }
        .title-desc{
          font-size: 24rpx;
          margin-left: 16rpx;
          color: #999999;
        }
      }
      .box-solid{
        width: 200rpx;
        height: 200rpx;
        margin-left: 24rpx;
        border-radius: 12rpx;
        border: 1px solid #EEEEEE;
        .img{
          width: 220rpx;
          height: 220rpx;
        }
      }
    }
    .join-box{
      width: 710rpx;
      min-height: 200rpx;
      padding-bottom: 24rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;
      .box{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx;
        border-bottom: 1px solid #EEEEEE;
      }
      .ceil{
        display: flex;
        align-items: center;
        padding: 24rpx;
        .sort{
          margin-right: 30rpx;
          font-size: 32rpx;
          font-weight: 500;
        }
        .name{
          margin-right: 20rpx;
        }
        .mobile{
          color: #0000ff;
        }
      }
    }

    .btn-box {
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 136rpx;
      .cancel-btn {
        width: 710rpx;
        height: 92rpx;
        font-size: 32rpx;
        background-color: #fedd00;
      }
    }
  }
</style>
